<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div class="topo-editor app-container">
    <WresizePanel3 class="full-height">
      <template v-slot:left>
        <TopoToolbox ref="topoToolbox" class="topo-toolbox" />
      </template>

      <template v-slot:center>
        <TopoMain ref="topoMain" class="topo-main" />
      </template>

      <template v-slot:right>
        <TopoProperties ref="topoProperties" class="topo-properties" />
      </template>
    </WresizePanel3>
  </div>
</template>

<script>
import WresizePanel3 from '@/topo/components/panel/WresizePanel3'
import TopoToolbox from '@/topo/components/topo/TopoToolbox'
import TopoMain from '@/topo/components/topo/TopoMain'
import TopoProperties from '@/topo/components/topo/TopoProperties'

export default {
  name: 'TopoEditor',
  components: {
    WresizePanel3,
    TopoToolbox,
    TopoMain,
    TopoProperties
  },
  data() {
    return {
      deviceName: null,
      deviceCore: null

    }
  },
  created() {
    const param = this.$route.query
    this.deviceName = param.deviceName
    this.deviceCore = param.deviceCore
    this.setTagsViewTitle()
  },
  methods: {
    setTagsViewTitle() {
      this.tempRoute = Object.assign({}, this.$route)
      const route = Object.assign({}, this.tempRoute, {
        title: `${this.deviceName}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    }
  }
}
</script>

<style lang="scss">
.topo-editor {
    position: relative;
    width: 100%;
    height: calc(100vh - 90px);

    .topo-toolbox {
        width: 100%;
        height: calc(100vh - 100px);
    }

    .topo-main {
        width: 100%;
        height: calc(100vh - 100px);
    }

    .topo-properties {
        width: 100%;
        height: calc(100vh - 100px);
    }
}
</style>
